<!--
 * @Description: 
 * @Author: zzj
 * @Date: 2021-10-22 13:59:07
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-26 20:46:51
-->
<template>
  <div class="dashboard-container">
    <div class="first_line">
      <div>订单总数</div>
      <div>总销售额</div>
      <div></div>
      <div></div>
    </div>
    <div class="second_line">
      <!-- 柱线混合图 -->
      <div><Sales></Sales></div>
      <!-- 饼状图 -->
      <div><Order></Order></div>
    </div>
  </div>
</template>

<script>
import Sales from "@/pages/statistics/Sales"
import Order from "@/pages/statistics/Order"
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  components: {
    Sales,
    Order,
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  .first_line {
    display: flex;
    height: 80px;
    & > div {
      flex: 1;
      padding: .5em;
      border-radius: 3px;
    }
    & > div:not(:last-child) {
      margin-right: .5em;
    }
    & >div:nth-child(1) {
      background-color: lightcyan;
    }
    & >div:nth-child(2) {
      background-color: lightcoral;
    }
    & >div:nth-child(3) {
      background-color: lavender;
    }
    & >div:nth-child(4) {
      background-color: lemonchiffon;
    }
  }
  .second_line {
    display: flex;
    & > div {
      flex:1;
      padding: 2em;
    }
    & > div:nth-child {
      margin-right: .5em;
    }
  }
}
</style>
